
<!doctype html>
<html >
    <head>
        <meta charset="utf-8">
    	<style>
			html{font-size:40px;}
			body{
				padding:0;margin:0;font-size:30px;font-family:cursive;color:#fff;overflow:hidden;width:100%;height:100%;
			}
			.box{width:0px;height:0px;margin:10% auto;
				border:150px solid;
				border-color:red orange green blue;
				transform:rotate(45deg);
				-webkit-animation:a 3s forwards,b 3s 3s forwards,c .1s 6s forwards;
				line-height:300px;text-align:center;
			}
			p{opacity:0;-webkit-animation:d 1s 6.1s forwards;}
			@-webkit-keyframes a{
				0%{
					transform:rotate(-45deg);
				}
				100%{
					transform:rotate(-1845deg);
					border-radius:300px;
				}
			}
			@-webkit-keyframes b{
				0%{
					border-color:red orange green blue;
				}
				25%{
					border-color:red green green blue;
				}
				50%{
					border-color:green green green blue;
				}
				75%{
					border-color:green;
				}
				100%{
					border-color:orange;
				}
			}
			@-webkit-keyframes c{
				0%{
					border:none;
					width:300px;height:300px;
					transform:rotate(0deg);
					background-color:orange;
				}
				
				100%{
					width:300px;height:300px;
					border:none;
					background-color:orange;
					transform:rotate(0deg);
				}
			}
			@-webkit-keyframes d{
				0%{
					opacity:0;
				}
				
				100%{
					opacity:1;
				}
			}
			
			
		</style>
    </head>
    <body>
		<div class="box">
			<p>Waiting Soon.</p>
		</div>
	</body>
</html>